<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 这是View  现在就是templet模板-->
    <!-- 这里是根组件的templet模板 -->
    <div id="app"> 
        <bbar thename='主页' :show='false'></bbar>
        <bbar thename='简介' :show='true'></bbar>
        <bbar thename='产品' :show='true'></bbar>
        <br>
        ---------------------------
        <br>
        <bbar :thename='p_name'></bbar>
        <br>
        
    </div>


    <script>
        Vue.component
        (   
            'bbar',
            {
                template: `
                        <div>
                            >>>
                            <button v-if='show' @click='c'>首页</button>
                            【root的child组件：bbar组件】【{{ thename }}】
                        </div>`,
                // props: ['thename','show']  // 接受父组件传进来的属性
                props: // 接受父组件传进来的属性
                {
                    thename:String,
                    show:Boolean,
                    // show:String, // 这样会有问题
                },
                methods: {
                    c(){
                        alert('首页');
                    }
                },
            }
        )
        
        var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
        (
            {
                el: '#app',
                data:
                {
                    p_name:'root组件的p_name属性'
                    // 即父组件传参给子组件使用bind绑定
                } ,
            }
        )
    </script>
</body>
</html>